<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ val }}
</div>
<div id="app">

</div>

<template id="app2">
  <div>
    {{val}}
    <button @click="fn2">按钮2</button>
    <button @click="fn3">按钮3</button>
    <counter aa='22' @bb='bb_fu'></counter>
  </div>
</template>

<script>

  //组件
  const Counter={
    template:`<div>2222 <button @click="fn1">按钮1</button></div>`,
    //用context接收父元素的值时候得注释掉 props
  /*  props:{
      aa:{type:String}
    },  */
    setup(props,context){
      //1.可以从props拿到子组件的值
      // console.log(props)
/////////////////****//////////////////////////
      //2.可以从context拿到子组件的值
      let {attrs,emit} =context
      let fn1=()=>{
        emit('bb')
      }
       
      console.log('context',context)
      console.log('context',attrs.aa)
      return {
        fn1
      }
    },
  }
  //父组件
const HelloVueApp = {
  template:"#app2",
  components:{Counter},
  methods:{
    fn2(){
      console.log(this.$options.setup)
    }
  },
  setup(){
    let val="测试"
   
    let fn3=()=>{
      val="我要改变测额"
      console.log(val)
    }
    let bb_fu=()=>{
      alert("我是子组件给的数据")
    }
    return {
      val,
      fn3,
      bb_fu
    }
  }
/*   data() {
    return {
      message: 'Hello Vue1!!'
    }
  } */
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>